<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container" v-if="showTable">
      <!-- 控件容器 -->
      <div class="search">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%;">
          <el-input placeholder="搜索关键词" v-model="keywords" size="small" clearable> </el-input>
        </div>
        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="设备编号" v-model="args.devID" size="small" clearable> </el-input>
        </div>

        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="使用单位" v-model="args.SydwName" style="" size="small" clearable> </el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%" size="small">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%" size="small">重置</el-button>
        </div>
      </div>

      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table v-loading="loading" border :data="tableData"
                    stripe max-height="618" style="width: 100%">
            <el-table-column fixed prop="id" label="ID"  min-width="10%">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  {{ scope.row.id }}
                  <div slot="reference" class="name-wrapper">
                    <el-button  type="text"  style="text-decoration: underline; color: #606266"
                                @click="gotoDetail(scope.row.id)"  >{{ scope.row.id }}
                    </el-button>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="f008" label="电气柜编号" min-width="10%">

            </el-table-column>
            <el-table-column prop="f007" label="电气柜名称" min-width="20%"> </el-table-column>
            <el-table-column prop="f005" label="所在设备" min-width="13%"> </el-table-column>
            <el-table-column prop="f001" label="所在单位" min-width="11%"> </el-table-column>
            <el-table-column  prop="history_max_temperature" label="历史最高值" min-width="10%"></el-table-column>
            <el-table-column  prop="history_min_temperature" label="历史最低值" min-width="10%"></el-table-column>
            <el-table-column  prop="history_avg_temperature" label="平均值" min-width="10%"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div v-if="showDetail" style="width: 100%;height: 100%;">
      <detail v-bind:id="id" style="height: 100%"></detail>
    </div>
  </el-card>
</template>
<script>
import { searchDataEngineDetailData,SearchArgs } from '../../../../api/dianqigui/data-engine';
import detail from "./detail";
import Breadcrumb from '../BreadCrumb/BreadCrumb.vue'
export default {
  name: 'DataEngine',
  data() {
    return {
      args: new SearchArgs(),
      bh:'',
      id:'',
      showTable: true,
      showDetail: false,
      keywords: '',
      tableData: [],
      total: 0,
      currentPage: 1,
      naviBasicItems: [{ text: '电气柜' }, { text: '数据引擎', to: '/dianqigui/dataEngine/dataEngine' }],
      naviItems: [],
      loading: false,
    }
  },
  components: {
    Breadcrumb,
    detail
  },
  created() {
      (this.showTable=true),
      (this.showDetail=false),
      (this.args.offset = 0),
      (this.args.num = 10),
      (this.naviItems = [...this.naviBasicItems])
    this.searchData()
  },
  methods: {
    gotoDetail(id) {
      this.id=id;
      this.showTable=false;
      this.showDetail=true
    },
    // 向后端发请求获得数据
    async searchData() {
      this.loading = true
      const res = await searchDataEngineDetailData(this.args)
      this.loading = false
      const list = res.data.list
      this.total=res.data.total
      this.tableData = list

    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.num = pageSize
      this.args.offset = 0
      this.searchData()
    },
    // 页数改变
    async pageChange(page) {
      this.currentPage = page
      this.args.offset = (page - 1) * this.args.num
      this.currentPage = page
      this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
  //iconfont的使用
  @font-face {
    font-family: 'iconfont';
    src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),
    url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),
    url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 25px;
    color: #0099ff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
